<template>
    <div>
        <div class="box">
            <div class="top"></div>
            <div class="boxBg">
                <ul class="formlist clearfix">
                    <li><input type="text" class="inp" v-model="account" /></li>
                    <li><input type="password" class="inp" v-model="passwords" /></li>
                    <li><input type="text" class="inp" v-model="code" /><img class="code" :src="nurl + '/code'" @click="getcode" v-if="updates" /></li>
                </ul>
            </div>
            <div class="bottom">
                <input type="button" class="btn" @click="loginFun" />
            </div>
        </div>
    </div>
</template>
<style>
    html,body{
        background: url(../../assets/images/_bg.jpg);
    }
</style>
<style scoped>
    *{
        box-sizing: initial;
    }
    input:focus {
        outline: 0;
    }
    .box{
        width: 873px;
        margin: 3% auto 0 auto;
    }
    .top{
        width: 873px;
        height: 222px;
        background: url(../../assets/images/_loginTop.jpg) no-repeat;
    }
    .boxBg{
        width: 413px;
        padding-left: 460px;
        height: 136px;
        background: url(../../assets/images/_loginbox.jpg) no-repeat;
    }
    .formlist>li{
        padding-top: 13px;
    }
    .formlist>li>.inp{
        width: 205px;
        line-height: 25px;
        font-size: 15px;
        font-weight: bold;
        font-family: Verdana, Arial, Helvetica, sans-serif;
        color: #fff3df;
        background: #341509;
        border: 0 none;
    }
    .bottom{
        width: 417px;
        padding-left: 456px;
        height: 319px;
        background: url(../../assets/images/_loginBottom.jpg) no-repeat;
    }
    .bottom>.btn{
        width: 120px;
        height: 34px;
        background: url(../../assets/images/_login_btn.jpg) no-repeat;
        border: 0 none;
        cursor: pointer;
    }
    .bottom>.btn:hover{
        background-position: 0px -37px;
    }
    .code{
        vertical-align: middle;
        height: 28px;
        margin: -4.5px 0px 0px -67px;
        z-index: 999;
    }
</style>
<script>

    import axios from 'axios'
    export default {
        data(){
            return{
                nurl: 'http://skxj.adf8813.com',
                account: '',
                passwords: '',
                code: '',
                id: '',
                updates: true,
            }
        },
        methods: {

            //登录
            loginFun(){
                var _this = this;
                axios({
                    method:"post",
                    url:"/api/auth/login",
                    data: {
                        'name': this.account,
                        'password': this.passwords,
                        'code': this.code
                    },

                })
                .then(function (response) {

                    // console.log(response);
                    //下注成功（发送   最新注单事件）
                    if(response.status == 200){

                        _this.id = response.data.uuid;

                        window.localStorage.Authorization = response.data.uuid;

                        _this.$router.push({path:'/agree',});
                        
                    }

                })
                .catch(function (error) {
                    alert(error.response.data.msg);
                });
            },
            //更换验证码
            getcode(){
                
                this.updates = false;
                this.$nextTick(()=>{
                    this.updates = true;
                });
            },
            
        },
        mounted(){
            
        },
    }
</script>
